iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 19
2
Modern Web

PixiJS,方便好用的 WebGL 內容產生工具系列 第 19

[PixiJS - Day-19] 在 PixiJS 裡材質的其他用法

  • 分享至 

  • xImage
  •  

先前兩篇提到 PixiJS 使用素材的方法:

  • 使用圖片素材
  • AnimatedSprite 類別,將 sprite 圖片當作逐格影片來用

[PixiJS - Day-12] PIXI.extras.AnimatedSprite
[PixiJS - Day-13] PIXI.loaders.Loader


本篇討論到的範例有兩個:

BASICS - Render-Texture
http://pixijs.io/examples/#/basics/render-texture.js
alt

DEMOS - RenderTexture
http://pixijs.io/examples/#/demos/render-texture-demo.js
alt


兩個範例實作上差不多,都是將 PixiJS 產生出來的畫面存下來再使用

回到 PIXI.Texture 類別:
http://pixijs.download/dev/docs/PIXI.Texture.html

PIXI.Texture.from (source):PIXI.Texture
source number | string | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | PIXI.BaseTexture

.from 的方法說明了可以使用什麼來當材質:
原始碼:

384.    static from(source)
385.    {
386.        // TODO auto detect cross origin..
387.        // TODO pass in scale mode?
388.        if (typeof source === 'string')
389.        {
390.            const texture = TextureCache[source];
391.
392.            if (!texture)
393.            {
394.                // check if its a video..
395.                const isVideo = source.match(/\.(mp4|webm|ogg|h264|avi|mov)$/) !== null;
396.
397.                if (isVideo)
398.                {
399.                    return Texture.fromVideoUrl(source);
400.                }
401.
402.                return Texture.fromImage(source);
403.            }
404.
405.            return texture;
406.        }
407.        else if (source instanceof HTMLImageElement)
408.        {
409.            return new Texture(BaseTexture.from(source));
410.        }
411.        else if (source instanceof HTMLCanvasElement)
412.        {
413.            return Texture.fromCanvas(source, settings.SCALE_MODE, 'HTMLCanvasElement');
414.        }
415.        else if (source instanceof HTMLVideoElement)
416.        {
417.            return Texture.fromVideo(source);
418.        }
419.        else if (source instanceof BaseTexture)
420.        {
421.            return new Texture(source);
422.        }
423.
424.        // lets assume its a texture!
425.        return source;
426.    }

.from 的方法調用了類別裡的其他方法,包括:

  • 查找 TextureCache 裡是否有對應的材質
  • 圖片:HTMLImageElement,或是讀取圖片URL
  • 影片:HTMLVideoElement,或是讀取影片URL
  • Canvas:HTMLCanvasElement (先前提到 Canvas 可用但 PixiJS 沒有的方法
    可以考慮在 Canvas 上做完後再給 PixiJS 使用 (例如漸層填色))
  • HTMLBaseTexture (本文範例中將畫面存下來的方法)

個人心得:

  • 更加理解 PIXI.Texture 運作方式後,
    常見的材質都可以交給 PIXI.Texture 產生使用

  • 擷取並重繪畫面很吃效能與記憶體,如果要使用在手機上
    可能要考慮效能


上一篇
[PixiJS - Day-18] 在 PIXI 裡使用 blendMode 混合模式
下一篇
[PixiJS - Day-20] 在 PixiJS 裡使用 Filters 與 Shader
系列文
PixiJS,方便好用的 WebGL 內容產生工具31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言